<template>
  <div class="app-container">
    <!-- 人脸抓拍记录 -->
    <div>
      <div>
        <el-button type="primary" @click="res(1)">人脸抓拍记录</el-button>
        <el-button type="primary" @click="res(2)">车辆抓拍记录</el-button>
<!--        <el-button type="primary" @click="res(3)">门禁记录</el-button>-->
      </div>
    </div>
    <el-form :model="queryForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="时间区间">
        <el-date-picker type="datetime" v-model="form.startTime" />--
        <el-date-picker type="datetime" v-model="form.endTime" />
      </el-form-item>
      <el-form-item label="车牌号" v-if="flag === 2 || flag ===3">
        <el-input v-model="queryForm.licensePlate" style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="辖区" v-if="flag === 2">
        <el-cascader
          clearable
          :options="treeOptions"
          :props="props"
          collapse-tags
          @change="handleChangeArea"
          ref="cascader"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="小区" v-if="flag === 2">
        <el-select clearable v-model="queryForm.dictId" placeholder="请选择" @change="handleChangeDict">
          <el-option
            v-for="item in dictList"
            :key="item.id"
            :label="item.communityName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备" v-if="flag === 2">
        <el-select clearable v-model="queryForm.gateId" placeholder="请选择">
          <el-option
            v-for="item in gateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="进出状态" v-if="flag === 2">
        <el-select clearable v-model="queryForm.inOut" placeholder="请选择">
          <el-option
            label="进入"
            value="in"
          >
          </el-option>
          <el-option
            label="离开"
            value="out"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="res(flag)">查询</el-button>
      </el-form-item>
    </el-form>

    <div v-if="flag === 1">
      <el-table
                :data="faceData"
                style="width: 100%">
        <!--      <el-table-column label="ID" align="center" prop="image">
                <template slot-scope="scope">
                  {{ scope.row.id}}
                </template>
              </el-table-column>-->
        <el-table-column label="人脸抓拍图片" align="center" prop="image">
          <template slot-scope="scope">
            <image-preview :src="scope.row.image" :width="50" :height="50" alt="Base64 Image"/>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="dateTime"
          label="抓拍时间"
        >
          <template slot-scope="scope">
            {{ new Date(scope.row.dateTime).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column
          label="性别"
        >
          <template slot-scope="scope">
            {{ scope.row.gender.value === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column
          label="是否带口罩">
          <template slot-scope="scope">
            {{ scope.row.mask.value === 'with_mask' ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          label="年龄区间"
        >
          <template slot-scope="scope">
            {{ scope.row.age.low }}--{{ scope.row.age.high }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="flag === 2">
      <h3>车辆抓拍记录总数：{{total}}</h3>
      <el-table
        v-loading="loading"
                :data="carData" style="width: 100%">
        <el-table-column prop="image" label="车辆抓拍图片" width="320">
          <template slot-scope="scope">
            <image-preview :src="scope.row.image" alt="Image" style="max-width: 100px; max-height: 100px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码" width="180">
          <template slot-scope="scope">
            {{ scope.row.licensePlate }}
          </template>
        </el-table-column>
        <el-table-column prop="inOut" label="进出状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.inOut === 'in' ? '进入' : '离开' }}
          </template>
        </el-table-column>
        <el-table-column prop="inOutTime" label="时间戳" width="220">
          <template slot-scope="scope">
            {{ new Date(Number(scope.row.inOutTime)).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="flag === 3">
      <h3>门禁记录总数：{{total}}</h3>
      <el-table
        v-loading="loading"
        :data="accessData" style="width: 100%">
        <el-table-column prop="image" label="图片" width="320">
          <template slot-scope="scope">
            <image-preview :src="scope.row.image" alt="Image" style="max-width: 100px; max-height: 100px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="licensePlate" label="刷卡人" width="180">
          <template slot-scope="scope">
            {{ scope.row.licensePlate }}
          </template>
        </el-table-column>
        <el-table-column prop="inOut" label="进出状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.inOut === 'in' ? '进入' : '离开' }}
          </template>
        </el-table-column>
        <el-table-column prop="inOutTime" label="刷卡时间" width="220">
          <template slot-scope="scope">
            {{ new Date(Number(scope.row.inOutTime)).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="licensePlate" label="设备名称" width="180">
          <template slot-scope="scope">
            {{ scope.row.deviceName }}
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" @click="handleDetail(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="detailDialog"
      title="车辆进出记录详情" v-if="flag === 2">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="记录ID">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="图片">
          <image-preview :src="detail.image" alt="Image" style="max-width: 100px; max-height: 100px;"/>
        </el-descriptions-item>
        <el-descriptions-item label="车牌号码">{{ detail.licensePlate }}</el-descriptions-item>
        <el-descriptions-item label="进出状态">{{ detail.inOut === 'in' ? '进入' : '离开' }}</el-descriptions-item>
        <el-descriptions-item label="进出时间">{{ new Date(Number(detail.inOutTime)).toLocaleString() }}</el-descriptions-item>
        <el-descriptions-item label="闸口名称">{{ detail.gate }}</el-descriptions-item>
        <el-descriptions-item label="大图">
          <image-preview :src="detail.bigImage" alt="Big Image" style="max-width: 100px; max-height: 100px;"/>
        </el-descriptions-item>
        <el-descriptions-item label="抓拍时间">{{ new Date(Number(detail.captureTime)).toLocaleString() }}</el-descriptions-item>
        <el-descriptions-item label="抓拍区域">{{ detail.captureArea }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialog = false">取 消</el-button>
          <el-button type="primary" @click="detailDialog = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="form.pageVo.currentPage"
      :limit.sync="form.pageVo.pageSize"
      @pagination="res(flag)"
    />


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import {captureData, handleDeleteFace} from "../../../api/community/dataCenter";
import {treeOptions} from "../../../api/community/area";
import {getDistrictByAreaId} from "../../../api/community/district";
import {getGateByDictId} from "../../../api/community/facilities";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      loading: false,
      treeOptions: [],
      props: { expandTrigger: 'hover', value: 'id' },
      faceData: [],
      accessData: [],
      form: {
        queryObj: {},
        keyWords: '',
        pageVo: {
          pageSize: 10,
          currentPage: 1,
          totalDocs: 1
        },
        searchFields: [
          ''
        ],
        highLightFields: [
          ''
        ],
        indexName: '',
        typeName: '',
        startTime:'',
        endTime:''
      },
      flag: 1,
      detail: {},
      detailDialog: false,
      carData: [],
      queryForm: {},
      dictList: [],
      gateList: [],
      total: 0
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getTreeOptions() {
      treeOptions(1).then(response => {
        this.treeOptions = response.data;
      });
    },
    handleChangeDict(value){
      let id = -1
      if (value > 0){
        id = value
      }
      getGateByDictId(id).then(response => {
        this.gateList = response.data
      })
    },
    handleChangeArea(value){
      let areaId = -1
      if(value.length > 0){
        areaId = value[value.length-1];
      }
      this.queryForm.captureAreaId = areaId
      getDistrictByAreaId(areaId).then(response => {
        this.dictList = response.data
      })
      this.queryForm.dictId=''
    },
    handleDetail(info) {
      this.detail = info
      console.log(this.detail)
      this.detailDialog = true
    },
    res(flag) {
      this.loading = true
      if (this.form.startTime !== ''){
        this.form.startTime = this.form.startTime.getTime()
      }
      if (this.form.endTime !== ''){
        this.form.endTime = this.form.endTime.getTime()
      }
      console.log(this.queryForm.endTime, this.queryForm.startTime)
      if (flag){
        this.form.flag = flag
      }
      this.form.queryObj = this.queryForm
      captureData(this.form).then(res => {
        let data_ = res.data.list
        this.total = res.data.total
        if (flag === 1){
          this.faceData = data_
        }
        if (flag === 2){
          this.carData = data_
        }
        if (flag === 3){
          this.accessData = data_
        }
      })
      this.loading = false
      this.flag = flag
    },
    handleDelete(id){
      handleDeleteFace(id).then(res => {
        if(200===res.code){
          window.location.reload()
          this.$message.success("删除成功");
        }
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getTreeOptions();
    this.res(1)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

</style>
